import './SecurityHome.scss'

import {
    PieTemplate,
    GaugeA01Template,
    LineStyle,
    LineConfigA01Template,
} from '../../../../Pages/Front/Assets/Template/AssetsCharts'

import { ICON } from '../../../Configure/Icon'

import { project } from '../../../Data'
import { useEffect, useRef, useState } from 'react'
import { useMount, useRequest, useSize } from 'ahooks'
import { Http } from '../../../Api'
const { imageUrl } = project[window.location.hostname]

const ColorA01 = ['rgba(143, 237, 125, 1)', 'rgba(151, 217, 255, 1)', 'rgba(255, 206, 39, 1)', 'rgba(255, 102, 67, 1)']

const chartStyld = {
    Legendfill: '#262626',
    XLine: '#262626',
    XLabel: '#262626',
    XTick: '#262626',
    YColoc: '#262626',
    YGrid: 'rgba(0,0,0,0.35)',
}

const ListA01 = [
    { uuid: 1, label: '低风险', value: 'A01', unit: '次' },
    { uuid: 2, label: '一般风险', value: 'A02', unit: '次' },
    { uuid: 3, label: '较大风险', value: 'A03', unit: '次' },
    { uuid: 4, label: '重大风险', value: 'A04', unit: '次' },
]

const ListA02 = [
    { uuid: 1, color: '#00F2DC', label: '下单数', value: 'submittedCount', unit: '个', img: 'ThrA0201.png' },
    { uuid: 2, color: '#37D4F2', label: '已整改', value: 'handledCount', unit: '个', img: 'ThrA0202.png' },
    { uuid: 3, color: '#FFEE8C', label: '未整改', value: 'unSubmittedCount', unit: '个', img: 'ThrA0203.png' },
    { uuid: 4, color: '#71FFE4', label: '整改中', value: 'handlingCount', unit: '个', img: 'ThrA0204.png' },
]

const ListA03 = [
    { uuid: 1, color: '#00F25A', label: '合格数', value: 'okCount', unit: '个', img: 'ThrA0205.png' },
    { uuid: 2, color: '#FFA750', label: '不合格', value: 'notOkCount', unit: '个', img: 'ThrA0206.png' },
]

const ListA04 = [
    { uuid: 1, label: '一般隐患', value: '一般', img: 'ListA0301.png' },
    { uuid: 2, label: '较大隐患', value: '较大', img: 'ListA0302.png' },
    { uuid: 3, label: '重大隐患', value: '重大', img: 'ListA0303.png' },
]
const ListA05 = [
    { uuid: 1, label: '安全教育', value: '安全教育活动', img: 'ThrA04B1.png' },
    { uuid: 2, label: '安全活动', value: '安全活动活动', img: 'ThrA04B2.png' },
    { uuid: 3, label: '教育人次', value: '安全教育人次', img: 'ThrA04B3.png' },
    { uuid: 4, label: '活动人次', value: '安全活动人次', img: 'ThrA04B4.png' },
]

export const SecurityHome = () => {
    const lineBox = useRef()
    const lineSize = useSize(lineBox)

    const [OrgList, setOrgList] = useState([])
    const [Active, setActive] = useState()

    const [DataA01, setDataA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0 })
    const [DataA02, setDataA02] = useState({
        submittedCount: 0,
        handledCount: 0,
        unSubmittedCount: 0,
        handlingCount: 0,
        okCount: 0,
        notOkCount: 0,
        整改率: 0,
    })

    const [DataA04, setDataA04] = useState({ 一般: 0, 较大: 0, 重大: 0 })
    const [DataA05, setDataA05] = useState({ 安全教育活动: 0, 安全活动活动: 0, 安全教育人次: 0, 安全活动人次: 0 })
    const [ChartA01, setChartA01] = useState([])
    const [ChartA02, setChartA02] = useState([])

    const { runAsync: getOrg } = useRequest(Http, { manual: true })
    useMount(() => {
        getOrg({ url: 'getOrgTree', data: { isByUserUuid: 1 } }).then(res => {
            setOrgList(res)
            setActive(res[0].uuid)
        })
    })

    const { runAsync: runA01 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let chart = []
            res.forEach(({ riskLevel, num }) => {
                chart = [...chart, { name: '走势', type: riskLevel, value: num }]
                if (riskLevel === '低风险') data.A01 = num
                if (riskLevel === '一般风险') data.A02 = num
                if (riskLevel === '较大风险') data.A03 = num
                if (riskLevel === '重大风险') data.A04 = num
            })
            setDataA01(data)
            setChartA01(chart)
        },
    })
    const { runAsync: runA02 } = useRequest(Http, { manual: true, onSuccess: res => setDataA02(res) })
    const { runAsync: runA03 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ month, riskLevel, riskLevelCount }) => ({
                name: riskLevel,
                type: month,
                value: riskLevelCount,
            }))
            setChartA02(data)
        },
    })
    const { runAsync: runA04 } = useRequest(Http, { manual: true, onSuccess: res => setDataA04(res) })
    const { runAsync: runA05 } = useRequest(Http, { manual: true, onSuccess: res => setDataA05(res) })
    useEffect(() => {
        runA01({ url: 'getGJriskLevelStat', data: { organizationUuid: Active } })
        runA02({ url: 'getGJsecurityStat', data: { organizationUuid: Active } })
        runA03({ url: 'getRiskLevelMonthStatByYear', data: { organizationUuid: Active } })
        runA04({ url: 'getSecurityStatByProblem', data: { organizationUuid: Active } })
        runA05({ url: 'getSecurityActivityTypeStat', data: { organizationUuid: Active } })
    }, [Active])

    const onActive = uuid => {
        setActive(uuid)
    }

    return (
        <div className="SecurityHome">
            <div className="left">
                {OrgList.map(({ uuid, tableName, children }) => (
                    <div key={uuid}>
                        <div className={`NavTitle${Active === uuid ? ' active' : ''}`} onClick={() => setActive(uuid)}>
                            {tableName}
                        </div>
                        {children.length !== 0 &&
                            children.map(({ uuid, tableName }) => (
                                <div
                                    className={`NavItem${Active === uuid ? ' active' : ''}`}
                                    key={uuid}
                                    onClick={() => setActive(uuid)}
                                >
                                    {tableName}
                                </div>
                            ))}
                    </div>
                ))}
            </div>
            <div className="right">
                <div className="top">
                    <div className="left">
                        <div className="Title">风险管理</div>
                        <div className="List">
                            <PieTemplate data={ChartA01} color={ColorA01} size={240} />
                            <div>
                                {ListA01.map(({ uuid, label, value, unit }, index) => (
                                    <div className="list" key={uuid} style={{ '--color': ColorA01[index] }}>
                                        {ICON['IconBianzu']}
                                        <div>{label}</div>
                                        <div>
                                            {DataA01[value]} <span>{unit}</span>{' '}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                    <div className="right">
                        <div className="Title">风险管理按月走势图</div>
                        <div className="List" ref={lineBox}>
                            {lineSize && (
                                <LineConfigA01Template
                                    size={lineSize}
                                    data={ChartA02}
                                    style={{ ...LineStyle, ...chartStyld }}
                                />
                            )}
                        </div>
                    </div>
                </div>
                <div className="btm">
                    <div className="left">
                        <div className="Title">隐患排查治理</div>
                        <div className="List">
                            <div>
                                {ListA02.map(({ uuid, color, label, value, unit, img }) => (
                                    <div key={uuid}>
                                        <img src={imageUrl + img} alt="" />
                                        <div>
                                            <div>{label}</div>
                                            <div>
                                                {DataA02[value]} <span>{unit}</span>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div>
                                <GaugeA01Template
                                    size={{ width: 200, height: 100 }}
                                    data={DataA02['整改率']}
                                    title="合格率"
                                    color="#262626"
                                />
                                <div>
                                    {ListA03.map(({ uuid, color, label, value, unit, img }) => (
                                        <div key={uuid}>
                                            <img src={imageUrl + img} alt="" />
                                            <div>
                                                <div>{label}</div>
                                                <div>
                                                    {DataA02[value]} <span>{unit}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                            <div>
                                {ListA04.map(({ uuid, label, value, img }) => (
                                    <div key={uuid}>
                                        <img src={imageUrl + img} alt="" />
                                        <div>
                                            <div>{label}</div>
                                            <div>{DataA04[value]}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                    <div className="right">
                        <div className="Title">安全活动管理</div>
                        <div className="List">
                            {ListA05.map(({ uuid, label, value, img }) => (
                                <div key={uuid}>
                                    <img src={imageUrl + img} alt="" />
                                    <div>
                                        <div>{label}</div>
                                        <div>{DataA05[value]}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
